﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Shimba Bootstrap 4 Admin Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
    <meta content="Beethemesdesign" name="author" />

    <!-- favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.png">


    <!-- Required css -->
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/style.css" rel="stylesheet" type="text/css" />


</head>

<body>

    <!-- Begin page -->
    <div class="wrapper">

        <!-- ============================================================= -->
        <!-- ===============    side menu content start  ================= -->
        <!-- ============================================================= -->
        <div class="left-side-menu">
            <div class="slimscroll-menu">
                <!-------------------------------------->
                <!-- Put your logo hear in img tag -->
                <a href="index.html" class="logo">
                    <span class="logo-lg">
                        <img class="logo-img-lg" src="assets/images/logo.png" alt="">
                    </span>
                    <span class="logo-sm">
                        <img class="logo-img-sm" src="assets/images/logo_sm.png" alt="">
                    </span>
                </a>
                <!-- Logo content end -->
                <!-------------------------------------->
                <!-------------------------------------->
                <!-- User details start -->
                <div class="sidenav-user">
                    <h4 class="mb-1 mt-0">Cindy Deitch</h4>
                    <p class="mb-2">UI/UX Designer</p>
                    <img src="assets/images/users/avatar-1.jpg" alt="" class="rounded-circle">
                </div>
                <!-- User details end -->
                <!-------------------------------------->
                <!-------------------------------------->
                <!-- Menu link start -->
                <ul class="metismenu side-nav">
                    <li class="menu-caption menu-item">导航栏</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-home"></i>
                            <span> 主面板 </span>
                            <span class="badge badge-success badge-pill float-right mr-3">最新</span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="index.html">首页</a></li>
                            <li><a href="dashboard-project.html">项目</a></li>
                            <li><a href="dashboard-sales.html">销售</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-command"></i>
                            <span class="badge badge-danger badge-pill float-right mr-3">100+</span>
                            <span> 小组件 </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="widgets-simple.html">统计</a></li>
                            <li><a href="widgets-data.html">数据</a></li>
                            <li><a href="widgets-chart.html">图表</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">UI 组件</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-box"></i>
                            <span> Bootstrap </span>
                            <span class="badge badge-primary-lighten badge-pill float-right mr-3">b4+</span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="ui-alert.html">Alert</a></li>
                            <li><a href="ui-badge.html">Badge</a></li>
                            <li><a href="ui-breadcumb.html">Breadcumb</a></li>
                            <li><a href="ui-buttons.html">Buttons</a></li>
                            <li><a href="ui-cards.html">Cards</a></li>
                            <li><a href="ui-collapse.html">Collapsed</a></li>
                            <li><a href="ui-dropdown.html">Dropdown</a></li>
                            <li><a href="ui-modals.html">Modals</a></li>
                            <li><a href="ui-pagination.html">Pagination</a></li>
                            <li><a href="ui-progress.html">Progress</a></li>
                            <li><a href="ui-spinners.html">Spinners</a></li>
                            <li><a href="ui-tabs.html">Tabs</a></li>
                            <li><a href="ui-toast.html">Toast</a></li>
                            <li><a href="ui-tooltip-popover.html">Tooltip & Popover</a></li>
                            <li><a href="ui-typography.html">Typography</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-layers"></i>
                            <span> Advance UI Kit </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="aui-alerts.html">Alert</a></li>
                            <li><a href="aui-calendar.html">Calendar</a></li>
                            <li><a href="aui-dragula.html">Dragula</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="dripicons-document"></i>
                            <span> Forms </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="form-elements.html">Basic Elements</a></li>
                            <li><a href="form-advanced.html">Form Advanced</a></li>
                            <li><a href="form-validation.html">Validation</a></li>
                            <li><a href="form-wizard.html">Wizard</a></li>
                            <li><a href="form-fileuploads.html">File Uploads</a></li>
                            <li class="menu-item">
                                <a href="javascript: void(0);" aria-expanded="false">Editors<span class="menu-sub-icon"></span></a>
                                <ul class="menu-level-third" aria-expanded="false">
                                    <li><a href="form-editors-summernote.html">Summernote</a></li>
                                    <li><a href="form-editors-simplemde.html">Simplemde</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-feather"></i>
                            <span> Icons </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="icons-drip.html">Drip</a></li>
                            <li><a href="icons-feather.html">Feather</a></li>
                            <li><a href="icons-ion.html">Ion</a></li>
                            <li><a href="icon-linear.html">Linear</a></li>
                            <li><a href="icons-material.html">Material</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">Charts & Maps</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-pie-chart"></i>
                            <span> Charts </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="charts-apex.html">Apex</a></li>
                            <li><a href="charts-chartjs.html">Chartjs</a></li>
                            <li><a href="charts-knob.html">Knob</a></li>
                            <li><a href="charts-morris.html">Morris</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-map"></i>
                            <span> Maps </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="maps-google.html">Google Maps</a></li>
                            <li><a href="maps-vector.html">Vector Maps</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">Tables</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-list"></i>
                            <span> Tables </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="tables-basic.html">Bootstrap Tables</a></li>
                            <li><a href="tables-datatable.html">Data Tables</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">Pages</li>
                    <li class="menu-item">
                        <a href="pages-starter.html" class="menu-link">
                            <i class="feather icon-monitor"></i>
                            <span> Sample Page </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="pages-profile.html" class="menu-link">
                            <i class="feather icon-user"></i>
                            <span> User Profile </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="pages-invoice.html" class="menu-link">
                            <i class="feather icon-printer"></i>
                            <span> Invoice </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="pages-faq.html" class="menu-link">
                            <i class="feather icon-help-circle"></i>
                            <span> FAQ </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-wifi-off"></i>
                            <span> Maintenance </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="pages-404.html">Error 404</a></li>
                            <li><a href="pages-maintenance.html">Maintenance</a></li>
                            <li><a href="pages-comming-soon.html">Comming soon</a></li>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-lock"></i>
                            <span> Authentication </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="pages-login.html">Login</a></li>
                            <li><a href="pages-login-2.html">Login 2</a></li>
                            <li><a href="pages-login-img.html">Login 3</a></li>
                            <li><a href="pages-register.html">Register</a></li>
                            <li><a href="pages-register-2.html">Register 2</a></li>
                            <li><a href="pages-register-img.html">Register 3</a></li>
                            <li><a href="pages-logout.html">Logout</a></li>
                            <li><a href="pages-logout-2.html">Logout 2</a></li>
                            <li><a href="pages-logout-img.html">Logout 3</a></li>
                            <li><a href="pages-recoverpw.html">Recover Password</a></li>
                            <li><a href="pages-recoverpw-2.html">Recover Password 2</a></li>
                            <li><a href="pages-recoverpw-img.html">Recover Password 3</a></li>
                            <li><a href="pages-lock-screen.html">Lock Screen</a></li>
                            <li><a href="pages-lock-screen-2.html">Lock Screen 2</a></li>
                            <li><a href="pages-lock-screen-img.html">Lock Screen 3</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="apps-tasks.html" class="menu-link">
                            <i class="feather icon-clipboard"></i>
                            <span> Tasks </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="icon feather icon-gitlab"></i>
                            <span> Projects </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="apps-projects-list.html">List</a></li>
                            <li><a href="apps-projects-details.html">Details</a></li>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="dripicons-browser"></i>
                            <span> Layouts </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="layouts-horizontal.html">Horizontal</a></li>
                            <li><a href="layouts-light-sidenav.html">Light Sidenav</a></li>
                            <li><a href="layouts-dark.html">layouts dark</a></li>
                            <li><a href="layouts-collapsed.html">Collapsed Sidenav</a></li>
                            <li><a href="layouts-boxed-vertical.html">Boxed Vertical</a></li>
                            <li><a href="layouts-boxed-horizontal.html">Boxed Horizontal</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- Menu link end -->
                <!-------------------------------------->

                <div class="clearfix"></div>
            </div>
        </div>
        <!-- ============================================================= -->
        <!-- ===============     side menu content End   ================= -->
        <!-- ============================================================= -->

        <!-- ============================================================== -->
        <!-- Start Page Content here -->
        <!-- ============================================================== -->

        <div class="content-page">
            <div class="content">

                <!-- ============================================================= -->
                <!-- ===============    Top bar header content start  ================= -->
                <!-- ============================================================= -->
                <div class="navbar-custom">
                    <!------------------------------------->
                    <!-- right side topbar content start -->
                    <ul class="list-unstyled topbar-right-menu float-right mb-0">
                        <li class="dropdown notification-list topbar-dropdown">
                            <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <i class="feather icon-mail noti-icon"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu">
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-map-pin text-muted"></i> &nbsp; Loction</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-upload-cloud text-muted"></i> &nbsp; Upload File</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-activity text-muted"></i> &nbsp; Report</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-life-buoy text-muted"></i> &nbsp; Support</a>
                                <div class="dropdown-divider"></div>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-github text-muted"></i> &nbsp; Github</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-slack text-muted"></i> &nbsp; Slack</a>
                            </div>
                        </li>

                        <li class="dropdown notification-list">
                            <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <i class="feather icon-bell noti-icon"></i>
                                <span class="noti-icon-badge"></span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated dropdown-lg">
                                <div class="dropdown-item noti-title">
                                    <h5 class="m-0">
                                        <span class="float-right">
                                            <a href="javascript: void(0);" class="text-dark">
                                                <small>Clear All</small>
                                            </a>
                                        </span>Notification <span class="badge badge-danger badge-pill">5 new</span>
                                    </h5>
                                </div>
                                <div class="slimscroll" style="max-height: 230px;">
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-primary">
                                            <i class="mdi mdi-comment-account-outline"></i>
                                        </div>
                                        <p class="notify-details">New order has been received.
                                            <small class="text-muted">1 min ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-info">
                                            <i class="mdi mdi-account-plus"></i>
                                        </div>
                                        <p class="notify-details">Membership application has been added.
                                            <small class="text-muted">5 hours ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon">
                                            <img src="assets/images/users/avatar-2.jpg" class="img-fluid rounded-circle" alt="" /> </div>
                                        <p class="notify-details">Cristina Pride</p>
                                        <p class="text-muted mb-0 user-msg">
                                            <small>New report file has been uploaded.</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-primary">
                                            <i class="mdi mdi-comment-account-outline"></i>
                                        </div>
                                        <p class="notify-details">Database sever #2 has been fully restarted.
                                            <small class="text-muted">4 days ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon">
                                            <img src="assets/images/users/avatar-4.jpg" class="img-fluid rounded-circle" alt="" /> </div>
                                        <p class="notify-details">Karen Robinson</p>
                                        <p class="text-muted mb-0 user-msg">
                                            <small>Membership application has been added.</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-info">
                                            <i class="mdi mdi-heart"></i>
                                        </div>
                                        <p class="notify-details">Herry liked
                                            <b>Admin </b>
                                            <small class="text-muted">13 days ago</small>
                                        </p>
                                    </a>
                                </div>
                                <a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all">
                                    View All
                                </a>
                            </div>
                        </li>
                        <li class="dropdown notification-list">
                            <a class="nav-link dropdown-toggle nav-user arrow-none mx-0" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <span class="account-user-avatar">
                                    <img src="assets/images/users/avatar-1.jpg" alt="user-image" class="rounded-circle">
                                </span>
                                <span>
                                    <span class="account-user-name">Rang Avdhut</span>
                                </span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu profile-dropdown">
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-user text-muted"></i> &nbsp; My profile</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-mail text-muted"></i> &nbsp; Messages</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-settings text-muted"></i> &nbsp; settings</a>
                                <div class="dropdown-divider"></div>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-power text-danger"></i> &nbsp; Log Out</a>
                            </div>
                        </li>
                    </ul>
                    <!-- right side topbar content end -->
                    <!------------------------------------->

                    <!---------------------------------------------->
                    <!-- Left side topbar content Start -->

                    <!-- Minimenu and mobille toggle button start -->
                    <button class="button-menu-mobile open-left">
                        <i class="feather icon-menu"></i>
                    </button>
                    <!-- Minimenu and mobille toggle button end -->


                    <div class="header-search">
                        <form>
                            <div class="input-group">
                                <span class="feather icon-search"></span>
                                <input type="text" class="form-control" placeholder="Search...">
                            </div>
                        </form>
                    </div>
                    <!-- Left side topbar content end -->
                    <!------------------------------------->
                </div>
                <!-- ================================================================== -->
                <!-- ===============    Top bar header content end  ================= -->
                <!-- ================================================================== -->


                <!-- Start Content-->
                <div class="container-fluid">

                    <!-- start page title -->
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="page-title-right">
                                    <ol class="breadcrumb m-0">
                                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="feather icon-home"></i></a></li>
                                        <li class="breadcrumb-item"><a href="javascript: void(0);">Pages</a></li>
                                        <li class="breadcrumb-item active">Profile</li>
                                    </ol>
                                </div>
                                <h4 class="page-title">Profile</h4>
                            </div>
                        </div>
                    </div>
                    <!-- end page title -->

                    <!-- Header -->
                    <div class="card mb-4">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-auto col-sm-12">
                                    <img src="assets/images/users/avatar-2.jpg" alt class="d-block ui-w-100 rounded-circle mb-3">
                                </div>
                                <div class="col">
                                    <h4 class="font-weight-bold mb-2">Rang Avdhut</h4>
                                    <div class="text-muted mb-2">
                                        Lorem ipsum dolor sit amet, nibh suavitate qualisque ut nam. Ad harum primis electram duo, porro principes ei has.
                                    </div>

                                    <a href="javascript:void(0)" class="d-inline-block text-dark">
                                        <strong>234</strong>
                                        <span class="text-muted">followers</span>
                                    </a>
                                    <a href="javascript:void(0)" class="d-inline-block text-dark ml-3">
                                        <strong>111</strong>
                                        <span class="text-muted">following</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Header -->

                    <div class="row">
                        <div class="col-xl-4">

                            <!-- Side info -->
                            <div class="card mb-4">
                                <div class="card-body">
                                    <a href="javascript:void(0)" class="btn btn-primary btn-round">+&nbsp; Follow</a> &nbsp;
                                    <a href="javascript:void(0)" class="btn icon-btn btn-default md-btn-flat btn-round">
                                        <span class="ion ion-md-mail"></span>
                                    </a>
                                </div>
                                <hr class="border-light m-0">
                                <div class="card-body">
                                    <p class="mb-2">
                                        <i class="ion ion-md-desktop ui-w-30 text-center text-lighter"></i> UI/UX Designer</p>
                                    <p class="mb-2">
                                        <i class="ion ion-ios-navigate ui-w-30 text-center text-lighter"></i> Panama, United Kingdom</p>
                                    <p class="mb-0">
                                        <i class="ion ion-md-globe ui-w-30 text-center text-lighter"></i>
                                        <a href="javascript:void(0)" class="text-dark">website.com</a>
                                    </p>
                                </div>
                                <hr class="border-light m-0">
                                <div class="card-body">
                                    <a href="javascript:void(0)" class="d-block text-dark mb-2">
                                        <i class="ion ion-logo-twitter ui-w-30 text-center"></i> @Beethemes
                                    </a>
                                    <a href="javascript:void(0)" class="d-block text-dark mb-2">
                                        <i class="ion ion-logo-facebook ui-w-30 text-center "></i> \Beethemes
                                    </a>
                                    <a href="javascript:void(0)" class="d-block text-dark mb-0">
                                        <i class="ion ion-logo-instagram ui-w-30 text-center"></i> #Beethemes
                                    </a>
                                </div>
                            </div>
                            <!-- / Side info -->

                            <!-- Skills -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5>Skills</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-1">HTML -
                                        <small class="text-muted">80%</small>
                                    </div>
                                    <div class="progress mb-3" style="height: 5px;">
                                        <div class="progress-bar bg-secondary progress-bar-striped" style="width: 80%;"></div>
                                    </div>

                                    <div class="mb-1">CSS -
                                        <small class="text-muted">95%</small>
                                    </div>
                                    <div class="progress mb-3" style="height: 5px;">
                                        <div class="progress-bar bg-success progress-bar-striped" style="width: 95%;"></div>
                                    </div>

                                    <div class="mb-1">Javascript -
                                        <small class="text-muted">90%</small>
                                    </div>
                                    <div class="progress mb-3" style="height: 5px;">
                                        <div class="progress-bar bg-warning progress-bar-striped" style="width: 90%;"></div>
                                    </div>

                                    <div class="mb-1">UI/UX -
                                        <small class="text-muted">80%</small>
                                    </div>
                                    <div class="progress" style="height: 5px;">
                                        <div class="progress-bar bg-danger progress-bar-striped" style="width: 80%;"></div>
                                    </div>

                                </div>
                                <a href="javascript:void(0)" class="card-footer d-block text-center text-dark small font-weight-semibold">SHOW ALL SKILLS</a>
                            </div>
                            <!-- / Skills -->

                            <!-- Friends -->
                            <div class="card mb-4">
                                <div class="card-header with-elements">
                                    <h5>Friends &nbsp;<small class="text-muted">591</small></h5>
                                    <div class="card-header-elements ml-auto">
                                        <a href="javascript:void(0)" class="btn btn-primary md-btn-flat btn-xs">Show All</a>
                                    </div>
                                </div>
                                <div class="row no-gutters row-border-light">
                                    <a href="javascript:void(0)" class="d-flex col-4 col-sm-3 col-md-4 flex-column align-items-center text-dark py-3 px-2">
                                        <img src="assets/images/users/avatar-1.jpg" alt class="d-block ui-w-40 rounded-circle mb-2">
                                        <div class="text-center small">Leon Wilson</div>
                                    </a>
                                    <a href="javascript:void(0)" class="d-flex col-4 col-sm-3 col-md-4 flex-column align-items-center text-dark py-3 px-2">
                                        <img src="assets/images/users/avatar-2.jpg" alt class="d-block ui-w-40 rounded-circle mb-2">
                                        <div class="text-center small">Allie Rodriguez</div>
                                    </a>
                                    <a href="javascript:void(0)" class="d-flex col-4 col-sm-3 col-md-4 flex-column align-items-center text-dark py-3 px-2">
                                        <img src="assets/images/users/avatar-3.jpg" alt class="d-block ui-w-40 rounded-circle mb-2">
                                        <div class="text-center small">Kenneth Frazier</div>
                                    </a>
                                    <a href="javascript:void(0)" class="d-flex col-4 col-sm-3 col-md-4 flex-column align-items-center text-dark py-3 px-2">
                                        <img src="assets/images/users/avatar-5.jpg" alt class="d-block ui-w-40 rounded-circle mb-2">
                                        <div class="text-center small">Nellie Maxwell</div>
                                    </a>
                                    <a href="javascript:void(0)" class="d-flex col-4 col-sm-3 col-md-4 flex-column align-items-center text-dark py-3 px-2">
                                        <img src="assets/images/users/avatar-6.jpg" alt class="d-block ui-w-40 rounded-circle mb-2">
                                        <div class="text-center small">Mae Gibson</div>
                                    </a>
                                    <a href="javascript:void(0)" class="d-flex col-4 col-sm-3 col-md-4 flex-column align-items-center text-dark py-3 px-2">
                                        <img src="assets/images/users/avatar-7.jpg" alt class="d-block ui-w-40 rounded-circle mb-2">
                                        <div class="text-center small">Alice Hampton</div>
                                    </a>
                                    <a href="javascript:void(0)" class="d-flex col-4 col-sm-3 col-md-4 flex-column align-items-center text-dark py-3 px-2">
                                        <img src="assets/images/users/avatar-4.jpg" alt class="d-block ui-w-40 rounded-circle mb-2">
                                        <div class="text-center small">Belle Ross</div>
                                    </a>
                                    <a href="javascript:void(0)" class="d-flex col-4 col-sm-3 col-md-4 flex-column align-items-center text-dark py-3 px-2">
                                        <img src="assets/images/users/avatar-2.jpg" alt class="d-block ui-w-40 rounded-circle mb-2">
                                        <div class="text-center small">Arthur Duncan</div>
                                    </a>
                                    <a href="javascript:void(0)" class="d-flex col-4 col-sm-3 col-md-4 flex-column align-items-center text-dark py-3 px-2">
                                        <img src="assets/images/users/avatar-6.jpg" alt class="d-block ui-w-40 rounded-circle mb-2">
                                        <div class="text-center small">Amanda Warner</div>
                                    </a>
                                </div>
                            </div>
                            <!-- / Friends -->
                        </div>
                        <div class="col">

                            <!-- Info -->
                            <div class="card mb-4">
                                <div class="card-body">
                                    <div class="row mb-2">
                                        <div class="col-md-3 text-muted">Birthday:</div>
                                        <div class="col-md-9">
                                            Dec 16, 1994
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-md-3 text-muted">Country:</div>
                                        <div class="col-md-9">
                                            <a href="javascript:void(0)" class="text-dark">Panama</a>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-md-3 text-muted">Languages:</div>
                                        <div class="col-md-9">
                                            <a href="javascript:void(0)" class="text-dark">English</a>
                                        </div>
                                    </div>
                                    <h6 class="my-3">Contacts</h6>
                                    <div class="row mb-2">
                                        <div class="col-md-3 text-muted">Phone:</div>
                                        <div class="col-md-9">
                                            +0 (123) 456 7891
                                        </div>
                                    </div>
                                    <h6 class="my-3">Interests</h6>
                                    <div class="row mb-2">
                                        <div class="col-md-3 text-muted">Favorite music:</div>
                                        <div class="col-md-9">
                                            <a href="javascript:void(0)" class="text-dark">Rock</a>,
                                            <a href="javascript:void(0)" class="text-dark">Alternative</a>,
                                            <a href="javascript:void(0)" class="text-dark">Electro</a>,
                                            <a href="javascript:void(0)" class="text-dark">Drum &amp; Bass</a>,
                                            <a href="javascript:void(0)" class="text-dark">Dance</a>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3 text-muted">Favorite movies:</div>
                                        <div class="col-md-9">
                                            <a href="javascript:void(0)" class="text-dark">The Green Mile</a>,
                                            <a href="javascript:void(0)" class="text-dark">Pulp Fiction</a>,
                                            <a href="javascript:void(0)" class="text-dark">Back to the Future</a>,
                                            <a href="javascript:void(0)" class="text-dark">WALL·E</a>,
                                            <a href="javascript:void(0)" class="text-dark">Django Unchained</a>,
                                            <a href="javascript:void(0)" class="text-dark">The Truman Show</a>,
                                            <a href="javascript:void(0)" class="text-dark">Home Alone</a>,
                                            <a href="javascript:void(0)" class="text-dark">Seven Pounds</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer text-center p-0">
                                    <div class="row no-gutters row-bordered row-border-light">
                                        <a href="javascript:void(0)" class="d-flex col flex-column text-dark py-3">
                                            <div class="font-weight-bold">24</div>
                                            <div class="text-muted small">posts</div>
                                        </a>
                                        <a href="javascript:void(0)" class="d-flex col flex-column text-dark py-3">
                                            <div class="font-weight-bold">51</div>
                                            <div class="text-muted small">videos</div>
                                        </a>
                                        <a href="javascript:void(0)" class="d-flex col flex-column text-dark py-3">
                                            <div class="font-weight-bold">215</div>
                                            <div class="text-muted small">photos</div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- / Info -->
                            <!-- Posts -->
                            <div class="card mb-4">
                                <div class="card-body">
                                    <p>
                                        Aliquam varius euismod lectus, vel consectetur nibh tincidunt vitae. In non dignissim est. Sed eu ligula metus. Vivamus eget quam sit amet risus venenatis laoreet ut vel magna. Sed dui ligula, tincidunt in nunc
                                        eu, rhoncus iaculis nisi.
                                    </p>
                                    <p>
                                        Sed et convallis odio, vel laoreet tellus. Vivamus a leo eu metus porta pulvinar. Pellentesque tristique varius rutrum.
                                    </p>
                                    <div class="ui-bordered">
                                        <div class="card bg-dark text-white">
                                            <img src="assets/images/bg/bg-1.jpg" class="card-img" alt="images">
                                            <div class="card-img-overlay d-flex align-items-end jusify-content-start">
                                                <div class="bg-dark rounded text-white small py-1 px-2">
                                                    <i class="ion ion-md-link"></i> &nbsp; external.com/some/page
                                                </div>
                                            </div>
                                        </div>
                                        <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5> Duis ut quam nec mi bibendum finibus et id tortor. Maecenas tristique dolor enim, sed tristique sem cursus et. Etiam tempus iaculis blandit.
                                        Vivamus a justo a elit bibendum pulvinar ut non erat. Cras in purus sed leo mattis consequat viverra id arcu.
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <a href="javascript:void(0)" class="d-inline-block text-muted">
                                        <small class="align-middle"><strong>123</strong> Likes</small>
                                    </a>
                                    <a href="javascript:void(0)" class="d-inline-block text-muted ml-2">
                                        <small class="align-middle"><strong>12</strong> Comments</small>
                                    </a>
                                    <a href="javascript:void(0)" class="d-inline-block text-muted ml-2">
                                        <i class="ion ion-md-share align-middle"></i>&nbsp;
                                        <small class="align-middle">Repost</small>
                                    </a>
                                </div>
                            </div>


                            <div class="card mb-4">
                                <div class="card-body">
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus commodo bibendum. Vivamus laoreet blandit odio, vel finibus quam dictum ut.
                                    </p>
                                    <a href="javascript:void(0)">
                                        <img src="assets/images/bg/bg-3.jpg" alt="images" class="img-fluid">
                                    </a>
                                </div>
                                <div class="card-footer">
                                    <a href="javascript:void(0)" class="d-inline-block text-muted">
                                        <small class="align-middle"><strong>123</strong> Likes</small>
                                    </a>
                                    <a href="javascript:void(0)" class="d-inline-block text-muted ml-2">
                                        <small class="align-middle"><strong>12</strong> Comments</small>
                                    </a>
                                    <a href="javascript:void(0)" class="d-inline-block text-muted ml-2">
                                        <i class="ion ion-md-share align-middle"></i>&nbsp;
                                        <small class="align-middle">Repost</small>
                                    </a>
                                </div>
                            </div>

                            <div class="card mb-4">
                                <div class="card-body">
                                    <p>
                                        Aliquam viverra ornare tincidunt. Vestibulum sit amet vestibulum quam. Donec eu est non velit rhoncus interdum eget vel lorem.
                                    </p>

                                    <div class="border-top-0 border-right-0 border-bottom-0 ui-bordered pl-3 mt-4 mb-2">
                                        <div class="media mb-3">
                                            <img src="assets/images/users/avatar-4.jpg" class="d-block ui-w-40 rounded-circle" alt>
                                            <div class="media-body ml-3">
                                                Sunita Ahir
                                                <div class="text-muted small">3 days ago</div>
                                            </div>
                                        </div>
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus commodo bibendum. Vivamus laoreet blandit odio, vel finibus quam dictum ut.
                                        </p>
                                        <a href="javascript:void(0)" class="ui-rect ui-bg-cover" style="background-image: url(http://bvmthemes.com/themes/shimba/live/'assets/images/bg/bg-8.jpg');"></a>
                                    </div>
                                    <a href="javascript:void(0)" class="text-muted small">Reposted from @sunita/posts/123</a>
                                </div>
                                <div class="card-footer">
                                    <a href="javascript:void(0)" class="d-inline-block text-muted">
                                        <small class="align-middle"><strong>123</strong> Likes</small>
                                    </a>
                                    <a href="javascript:void(0)" class="d-inline-block text-muted ml-2">
                                        <small class="align-middle"><strong>12</strong> Comments</small>
                                    </a>
                                    <a href="javascript:void(0)" class="d-inline-block text-muted ml-2">
                                        <i class="ion ion-md-share align-middle"></i>&nbsp;
                                        <small class="align-middle">Repost</small>
                                    </a>
                                </div>
                            </div>

                            <!-- / Posts -->

                        </div>
                    </div>


                </div> <!-- container -->

            </div> <!-- content -->

            <!-- ============================================================= -->
            <!-- ===============    footer content start  ================= -->
            <!-- ============================================================= -->

            <footer class="footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6">
                            © Shimba - by Beethemesdesign
                        </div>
                        <div class="col-md-6">
                            <div class="text-md-right footer-links d-none d-md-block">
                                <a href="javascript: void(0);">Buy Now</a>
                                <a href="http://www.bootstrapmb.com/">Rate us</a>
                               
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
            <!-- ============================================================= -->
            <!-- ===============    footer content start  ================= -->
            <!-- ============================================================= -->


        </div>

        <!-- ============================================================== -->
        <!-- End Page content -->
        <!-- ============================================================== -->


    </div>
    <!-- END wrapper -->

    <!-- Required js -->
    <script src="assets/js/app.js"></script>

</body>

</html>
